import React, { Component } from "react";
import styles from "../../style.less";

class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cvWidth: 400,
    };
  }
  componentDidMount() {
    {
      this.Canvasline();
    }
  }

  Canvasline = () => {
    var canvas = document.getElementById("line");
    var can = canvas.getContext("2d");
    can.strokeStyle = "rgb(67, 83, 114)";
    can.lineWidth = 2;
    can.beginPath();
    can.moveTo(1, 1);
    can.lineTo(120, 1);
    can.stroke();
    can.beginPath();
    can.moveTo(220, 33);
    can.lineTo(120, 0);
    can.stroke();

    can.beginPath();
    can.moveTo(80, 1);
    can.lineTo(180, 33);
    can.stroke();
    can.moveTo(180, 33);
    can.lineTo(220, 33);
    can.stroke();
    can.moveTo(40, 1);
    can.lineTo(140, 33);
    can.stroke();
    can.moveTo(140, 33);
    can.lineTo(180, 33);
    can.stroke();

    can.beginPath();
    can.moveTo(660, 1);
    can.lineTo(560, 33);
    can.stroke();
    can.moveTo(520, 33);
    can.lineTo(560, 33);
    can.stroke();
    can.moveTo(700, 1);
    can.lineTo(600, 33);
    can.stroke();
    can.moveTo(560, 33);
    can.lineTo(600, 33);
    can.stroke();

    can.beginPath();
    can.moveTo(220, 33);
    can.lineTo(520, 33);
    can.stroke();
    can.beginPath();
    can.moveTo(520, 33);
    can.lineTo(620, 0);
    can.stroke();
    can.beginPath();
    can.moveTo(620, 1);
    can.lineTo(740, 1);
    can.stroke();
  };
  render() {
    let { windowWidth } = this.props;
    return (
      <div>
        <canvas
          id="line"
          width="740px"
          height="35"
          className={styles.canstyle}
        ></canvas>
      </div>
    );
  }
}

export default index;
